<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>12306 注册</title>
    <link rel="stylesheet" href="framework/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="framework/reset.css">
    <link rel="stylesheet" href="styles/register.css">
</head>
<body>
    <!-- 总容器 -->
    <div class="wrapper">
        <!-- header部分 -->
        <header class="fixed-header">
            <div class="angle-left">
                <a href=""><i class="fa fa-angle-left"></i></a>
            </div>
            <p class="register-header">注册</p>
        </header>

        <!-- 扫描添加部分 -->
        <div class="scan-add">
            <img src="images/scan-add.png" alt="">
            <p>扫描添加</p>
        </div>

        <!-- 基本信息部分 -->
        <div class="basic-info">
            <div class="title">
                <p>基本信息</p>
            </div>
            <ul class="form-box">
                <li>
                    <div class="title">
                        用 户 名：
                    </div>
                    <div class="content">
                        <input type="text" placeholder="字母、数字或下划线，6-30位" style="text-align: right;">
                    </div>
                </li>
                <li>
                    <div class="title">
                        密 码：
                    </div>
                    <div class="content">
                        <input type="password" placeholder="字母、数字或下划线，6-30位" style="text-align: right;">
                    </div>
                </li>
                <li>
                    <div class="title">
                        确认密码：
                    </div>
                    <div class="content">
                        <input type="text" placeholder="请再次输入密码" style="text-align: right;">
                    </div>
                </li>
            </ul>
        </div>

        <!-- 详细信息部分 -->
        <div class="detail-info">
            <div class="title">
                <p>详细信息（用于身份核验，请务必正确填写）</p>
            </div>
            <ul class="form-box">
                <li>
                    <div class="title">
                        姓名：
                    </div>
                    <div class="content">
                        <input type="text" placeholder="请输入真实姓名，以便购票" style="text-align: right;">
                    </div>
                </li>
                <li>
                    <div class="title">
                        证件号码：
                    </div>
                    <div class="content">
                        <input type="number" placeholder="请输入证件号码" style="text-align: right;">
                    </div>
                </li>
            </ul>
        </div>

        <!-- 联系方式部分 -->
        <div class="contact-info">
            <div class="title">
                <p>联系方式</p>
            </div>
            <ul class="form-box">
                <li>
                    <div class="title">
                        手机号码： +86|
                    </div>
                    <div class="content">
                        <input type="text" placeholder="请输入手机号码" style="text-align: right;">
                    </div>
                </li>
                <li>
                    <div class="title">
                        电子邮箱：
                    </div>
                    <div class="content">
                        <input type="email" placeholder="请输入邮箱地址" style="text-align: right;">
                    </div>
                </li>
            </ul>
        </div>

        <!-- 附加信息部分 -->
        <div class="additional-info">
            <div class="title">
                <p>附加信息</p>
            </div>
            <ul class="form-box">
                <li>
                    <div class="title">
                        旅客类型：
                    </div>
                    <div class="content">
                        <p>成人</p>
                    </div>
                </li>
            </ul>
        </div>

        <!-- 同意条款部分 -->
        <div class="agree">
            <i class="fa fa-check-square-o"></i>
            <p class="one">同意 </p>
            <p class="two">服务条款、隐私权政策</p>
        </div>

        <!-- 下一步按钮部分 -->
        <div class="next">
            <button onclick="location.href='login.html'">下一步</button>
        </div>
    </div>
</body>
</html>